<template>
  <div class="food-content-box">
    <el-breadcrumb separator="/" class="page-title">
      <el-breadcrumb-item :to="{ path: 'restaurants' }">{{$t('m.Restaurants')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('m.New')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-box container-padding">
      <el-form :inline="true" label-position="top" :model="submitForm"  :rules="rules" size="mini" ref="submitForm" v-loading="loading"  class="form-min-width">
        <div class="container-box label-style">
          <el-row :gutter="20">
            <el-col>
              <el-form-item :label="$t('m.Status')" prop="status">
                <el-select  style="width: 200px" v-model="submitForm.status" placeholder="">
                  <el-option v-for="rg in status" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item  style="width: 200px" :label="$t('m.Name')" prop="name">
                <el-input v-model="submitForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item :label="$t('m.Region')" prop="regionId" >
                <el-select  style="width: 200px" v-model="submitForm.regionId" placeholder="" @change="getTownships($event)">
                  <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('m.Township')" prop="townshipId" >
                <el-select  style="width: 200px" v-model="submitForm.townshipId" placeholder="" >
                  <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item :label="$t('m.Street')" style="width: 200px" prop="street" >
                <el-input v-model="submitForm.street"></el-input>
              </el-form-item>
              <el-form-item :label="$t('m.Phoneseparatebycomma')" style="width: 200px"  prop="phone">
                <el-input v-model="submitForm.phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <span class="label-title">Google GPS latitude, longitude (example:16.803973,96.135793)</span>
              <el-form-item style="width: 200px" prop="latitude">
                <el-input v-model="submitForm.latitude"></el-input>
              </el-form-item>
              <el-form-item style="width: 200px" prop="longitude">
                <el-input v-model="submitForm.longitude"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--Opening hours-->
          <el-row>
            <el-form-item :label="$t('m.Openinghours')" prop="openingHours">
              <el-input
                style="min-width:500px;"
                type="textarea"
                :rows="5"
                :maxlength="2000"
                placeholder=""
                v-model="submitForm.openingHours">
              </el-input>
            </el-form-item>
          </el-row>
          <!--Cuisine-->
          <el-row>
            <span class="label-title">{{$t('m.Cuisine')}}</span>
            <div class="container-box">
            <el-form-item label="" class="label-vertical features-check" prop="cuisineIds">
              <el-checkbox-group
                v-model="submitForm.cuisineIds">
                <el-checkbox v-for="i in cuisine" :label="i.id" :key="i.id">{{i.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            </div>
          </el-row>
          <!--Cuisine (Myanmar)-->
          <el-row>
            <span class="label-title">{{$t('m.CuisineMyanmar')}}</span>
            <div class="container-box">
              <el-form-item label="" class="label-vertical features-check" prop="cuisineMyanmarIds">
                <el-checkbox-group
                  v-model="submitForm.cuisineMyanmarIds">
                  <el-checkbox v-for="i in cuisineMyanmar" :label="i.id" :key="i.id">{{i.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </el-row>
          <!--Atmosphere-->
          <el-row>
            <span class="label-title">{{$t('m.Atmosphere')}}</span>
            <div class="container-box">
              <el-form-item label="" class="label-vertical features-check" prop="atmosphereIds">
                <el-checkbox-group
                  v-model="submitForm.atmosphereIds">
                  <el-checkbox v-for="i in atmosphere" :label="i.id" :key="i.id">{{i.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </el-row>
          <!--Facilities/Services-->
          <el-row>
            <span class="label-title">{{$t('m.FacilitiesServices')}}</span>
            <div class="container-box">
              <el-form-item label="" class="label-vertical features-check" prop="serviceIds">
                <el-checkbox-group
                  v-model="submitForm.serviceIds">
                  <el-checkbox v-for="i in service" :label="i.id" :key="i.id">{{i.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </el-row>
          <!--Payment options-->
          <el-row>
            <span class="label-title">{{$t('m.Paymentoptions')}}</span>
            <div class="container-box">
              <el-form-item label="" class="label-vertical features-check" prop="paymentIds">
                <el-checkbox-group
                  v-model="submitForm.paymentIds">
                  <el-checkbox v-for="i in payment" :label="i.id" :key="i.id">{{i.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </el-row>
          <!--Special conditions (2000)-->
          <el-row>
            <el-form-item :label="$t('m.Specialconditions')" prop="specialConditions">
              <el-input
                style="min-width:500px;"
                type="textarea"
                :rows="5"
                :maxlength="2000"
                placeholder=""
                v-model="submitForm.specialConditions">
              </el-input>
            </el-form-item>
          </el-row>
          <!--Merchant description (2000)-->
          <el-row>
            <el-form-item :label="$t('m.Merchantdescription')" prop="merchantDescription">
              <el-input
                style="min-width:500px;"
                type="textarea"
                :rows="5"
                :maxlength="2000"
                placeholder=""
                v-model="submitForm.merchantDescription">
              </el-input>
            </el-form-item>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item :label="$t('m.Sittingcapacity')" style="width: 200px" prop="sittingCapacity">
                <el-input v-model="submitForm.sittingCapacity"></el-input>
              </el-form-item>
              <el-form-item :label="$t('m.Averageprice')" style="width: 200px" prop="averagePriceKyat">
                <el-input v-model.number="submitForm.averagePriceKyat"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="bottom-line margin-line"></div>
          <!--Recommended dish-->
          <el-row>
            <span class="label-title">{{$t('m.Recommendeddish')}}</span>
            <el-col  :span="10">
              <el-form-item :label="$t('m.Dish')" style="width: 420px" prop="dishName0">
                <el-input v-model="submitForm.dishName0"></el-input>
              </el-form-item>
              <el-form-item style="width: 420px" prop="dishName1">
                <el-input v-model="submitForm.dishName1"></el-input>
              </el-form-item>
              <el-form-item style="width: 420px" prop="dishName2">
                <el-input v-model="submitForm.dishName2"></el-input>
              </el-form-item>
              <el-form-item style="width: 420px" prop="dishName3">
                <el-input v-model="submitForm.dishName3"></el-input>
              </el-form-item>
              <el-form-item style="width: 420px" prop="dishName4">
                <el-input v-model="submitForm.dishName4"></el-input>
              </el-form-item>
            </el-col>
            <el-col  :span="4">
              <el-form-item :label="$t('m.Pricekyat')" style="width: 200px" prop="dishPrice0">
                <el-input v-model.number="submitForm.dishPrice0"></el-input>
              </el-form-item>
              <el-form-item style="width: 200px" prop="dishPrice1">
                <el-input v-model.number="submitForm.dishPrice1"></el-input>
              </el-form-item>
              <el-form-item style="width: 200px" prop="dishPrice2">
                <el-input v-model.number="submitForm.dishPrice2"></el-input>
              </el-form-item>
              <el-form-item style="width: 200px" prop="dishPrice3">
                <el-input v-model.number="submitForm.dishPrice3"></el-input>
              </el-form-item>
              <el-form-item style="width: 200px" prop="dishPrice4">
                <el-input v-model.number="submitForm.dishPrice4"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="bottom-line margin-line"></div>
          <el-row>
            <el-form-item :label="$t('m.Cover')" class="agent-photo">
              <uploadCoverImages ref="uploadCoverImages"></uploadCoverImages>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="$t('m.Dish')" class="agent-photo">
              <uploadDishImages ref="uploadDishImages"></uploadDishImages>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="$t('m.Ambience')" class="agent-photo">
              <uploadAmbienceImages ref="uploadAmbienceImages"></uploadAmbienceImages>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="$t('m.Menu')" class="agent-photo">
              <uploadMenuImages ref="uploadMenuImages"></uploadMenuImages>
            </el-form-item>
          </el-row>
          <div class="bottom-line margin-line"></div>
          <el-row>
            <el-col  :span="12">
            <el-form :inline="true" label-position="top" :model="addDiscountForm"  :rules="ruleDiscount" size="mini" ref="addDiscountForm">
              <el-col>
                <el-form-item label="Discount %" prop="discount">
                  <el-input v-model.number="addDiscountForm.discount"  style="width: 120px"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="Time from">
                  <el-select  style="width: 70px" v-model="addDiscountForm.timeHourFrom" @change="expTimeFrom()" placeholder="">
                    <el-option v-for="rg in times" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 38px;">
                  <el-select  style="width: 70px" v-model="addDiscountForm.timeMinuteFrom" @change="expTimeFrom()" placeholder="">
                    <el-option v-for="rg in timeMins" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 38px;">
                  <el-select  style="width: 70px" v-model="addDiscountForm.timeFlagFrom" :disabled="isDisabled1" placeholder="">
                    <el-option v-for="rg in timeAPs" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 38px;">
                  -
                </el-form-item>
                <el-form-item label="Time to">
                  <el-select  style="width: 70px" v-model="addDiscountForm.timeHourTo" @change="expTimeTo()" placeholder="">
                    <el-option v-for="rg in times" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 38px;">
                  <el-select  style="width: 70px" v-model="addDiscountForm.timeMinuteTo" @change="expTimeTo()" placeholder="">
                    <el-option v-for="rg in timeMins" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 38px;">
                  <el-select  style="width: 70px" v-model="addDiscountForm.timeFlagTo" :disabled="isDisabled2" placeholder="">
                    <el-option v-for="rg in timeAPs" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-col>
                <el-button type="primary" size="small" @click="addDiscount()">Add ></el-button>
                </el-col>
              </el-col>
            </el-form>
            </el-col>
            <el-col  :span="12">
              <!--表格-->
              <el-table
                :data="discountData"
                border
                style="width: 100%;margin-top:20px;">
                <el-table-column
                  prop="discount"
                  label="Discount %"
                  align="center"
                  min-width="100">
                </el-table-column>
                <el-table-column
                  label="Time from"
                  align="center"
                  min-width="100">
                  <template slot-scope="scope">
                    <div class="list-info">
                      <span v-if="scope.row.timeHourFrom == '00' && scope.row.timeFlagFrom == 1">12</span><span v-else>{{scope.row.timeHourFrom}}</span>:<span style="margin-right:5px;" v-if="scope.row.timeMinuteFrom == 0">00</span><span style="margin-right:5px;" v-else>30</span>
                      <span v-if="scope.row.timeFlagFrom == 0">AM</span>
                      <span v-else>PM</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="Time to"
                  align="center"
                  min-width="100">
                  <template slot-scope="scope">
                    <div class="list-info">
                      <span v-if="scope.row.timeHourTo == '00' && scope.row.timeFlagTo == 1">12</span><span v-else>{{scope.row.timeHourTo}}</span>:<span style="margin-right:5px;" v-if="scope.row.timeMinuteTo == 0">00</span><span style="margin-right:5px;" v-else>30</span>
                      <span v-if="scope.row.timeFlagTo == 0">AM</span>
                      <span v-else>PM</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="Delete"
                  align="center"
                  min-width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="Delete(scope.$index)">Delete</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <div class="bottom-line margin-line"></div>
          <!--Notes (internal use)-->
          <el-row>
            <el-form-item :label="$t('m.Notesinternaluse')" prop="notes">
              <el-input
                style="min-width:500px;"
                type="textarea"
                :rows="5"
                :maxlength="2000"
                placeholder=""
                v-model="submitForm.notes">
              </el-input>
            </el-form-item>
          </el-row>
          <el-row :gutter="40" type="flex" justify="center" style="padding:40px 0;">
            <el-col :span="6">
              <el-button @click.native="cancelPutForm()" size="medium" style="width:100%">
                {{$t('m.Cancel')}}
              </el-button>
            </el-col>
            <el-col :span="6">
              <el-button @click.native="uploadSubmitForm('submitForm')"
                         v-loading.fullscreen.lock="fullscreenLoading" size="medium" type="warning" style="width:100%">
                {{$t('m.Save')}}
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
  import Qs from 'qs'
  import { searchResList, uploadFormInfo, uploadRestaurantPhotos,uploadRestaurantCoverLogo, initRestaurant } from '../../api/mgc_api'
  import uploadCoverImages from '@/components/imageComponents/uploadCoverImages'
  import uploadDishImages from '@/components/imageComponents/uploadDishImages'
  import uploadAmbienceImages from '@/components/imageComponents/uploadAmbienceImages'
  import uploadMenuImages from '@/components/imageComponents/uploadMenuImages'
  // 英语JSON
  import regions from '@/json/region'
  import townships from '@/json/township'
  import status from '@/json/status'
  import cuisine from '@/json/cuisine'
  import cuisineMyanmar from '@/json/cuisineMyanmar'
  import atmosphere from '@/json/atmosphere'
  import service from '@/json/service'
  import payment from '@/json/payment'
  // 缅甸语JSON
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_status from '@/mmJson/status'
  import mm_cuisine from '@/mmJson/cuisine'
  import mm_cuisineMyanmar from '@/mmJson/cuisineMyanmar'
  import mm_atmosphere from '@/mmJson/atmosphere'
  import mm_service from '@/mmJson/service'
  import mm_payment from '@/mmJson/payment'
  export default {
    name: 'newRestaurant',
    data() {
      return {
        // 表单字段
        townships: [],
        times: [
          {"value": "01", "text": "1"},
          {"value": "02", "text": "2"},
          {"value": "03", "text": "3"},
          {"value": "04", "text": "4"},
          {"value": "05", "text": "5"},
          {"value": "06", "text": "6"},
          {"value": "07", "text": "7"},
          {"value": "08", "text": "8"},
          {"value": "09", "text": "9"},
          {"value": "10", "text": "10"},
          {"value": "11", "text": "11"},
          {"value": "00", "text": "12"},
        ],
        timeMins: [
          {"value": "00", "text": "00"},
          {"value": "30", "text": "30"},
        ],
        timeAPs: [
          {"value": 0, "text": "AM"},
          {"value": 1, "text": "PM"},
        ],
        isDisabled1: false,
        isDisabled2: false,
        addDiscountForm: {
          discount: null,
          timeHourFrom: '01',
          timeMinuteFrom: '00',
          timeFlagFrom: 0,
          timeHourTo: '01',
          timeMinuteTo: '00',
          timeFlagTo: 0,
        },
        discountData: [
          //  数据格式
          // {
          //   discount: '10',
          //   timeHourFrom: 1,
          //   timeMinuteFrom: 1,
          //   timeFlagFrom: 1,
          //   timeHourTo: 1,
          //   timeMinuteTo: 1,
          //   timeFlagTo: 1,
          //   timeFrom: '01:00:00', ==> 传给后台
          //   timeTo: '01:00:00', ==> 传给后台
          // }
        ],
        submitForm: {
          // 表单数据必填字段
          status: 1,
          regionId: null,
          townshipId: null,
          name: null,
          street: null,
          phone: null,
          latitude: null,
          longitude : null,
          openingHours : null,
          cuisineIds : [],
          cuisineMyanmarIds : [],
          atmosphereIds : [],
          serviceIds : [],
          paymentIds : [],
          specialConditions : null,
          merchantDescription : null,
          sittingCapacity : null,
          averagePriceKyat : null,
          dishName0 : null,
          dishName1 : null,
          dishName2 : null,
          dishName3 : null,
          dishName4 : null,
          dishPrice0 : null,
          dishPrice1 : null,
          dishPrice2 : null,
          dishPrice3 : null,
          dishPrice4 : null,
          notes: '',
        },
        // 添加表单修改数据和字段
        id: '',
        fullscreenLoading: false,
        loading: false,
        ruleDiscount: {
          discount: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  callback(new Error('please enter discount'))
                } else {
                  callback()
                }
              }, trigger: 'change'
            }
          ],
        },
        rules: {
          name: [
            {required: true, message: 'please enter name', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: 'please enter phone', trigger: 'change'}
          ],
          longitude: [
            {
              validator: (rule, value, callback) => {
                if (value){
                  // if (/^(\-|\+)?\d+(\.\d+)?$/.test(value) == false) {
                  //   callback(new Error('please enter number'))
                  // } else if (/^[-+]?\d*[.]?\d{0,6}$/.test(value) == false) {
                  //   // callback(new Error('error enter'))
                  //   this.submitForm.longitude = Number(value).toFixed(6)
                  //   callback()
                  // } else {
                  //   callback()
                  // }
                  if (/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/.test(value) == false) {
                    callback(new Error('Please fill in the correct longitude'))
                  } else {
                    callback()
                  }
                } else {
                  callback()
                }
              }, trigger: 'blur'
            }
          ],
          latitude:[
            {
              validator: (rule, value, callback) => {
                if (value){
                  // if (/^(\-|\+)?\d+(\.\d+)?$/.test(value) == false) {
                  //   callback(new Error('please enter number'))
                  // } else if (/^[-+]?\d*[.]?\d{0,6}$/.test(value) == false) {
                  //   // callback(new Error('error enter'))
                  //   this.submitForm.latitude = Number(value).toFixed(6)
                  //   callback()
                  // } else {
                  //   callback()
                  // }
                  if (/^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/.test(value) == false) {
                    callback(new Error('Please fill in the correct latitude'))
                  } else {
                    callback()
                  }
                } else {
                  callback()
                }
              }, trigger: 'blur'
            }
          ],
          dishName0: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishPrice0) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  callback()
                }
              }, trigger: 'blur'
            }
          ],
          dishName1: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishPrice1) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  callback()
                }
              }, trigger: 'blur'
            }
          ],
          dishName2: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishPrice2) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  callback()
                }
              }, trigger: 'blur'
            }
          ],
          dishName3: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishPrice3) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  callback()
                }
              }, trigger: 'blur'
            }
          ],
          dishName4: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishPrice4) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  callback()
                }
              }, trigger: 'blur'
            }
          ],
          dishPrice0: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishName0) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  if (/^(\-|\+)?\d+(\.\d+)?$/.test(value) == false) {
                    callback(new Error('please enter number'))
                  } else {
                    this.submitForm.dishPrice0 = Number(value).toFixed(4)
                    callback()
                  }
                }
              }, trigger: 'blur'
            }
          ],
          dishPrice1: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishName1) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  if (/^(\-|\+)?\d+(\.\d+)?$/.test(value) == false) {
                    callback(new Error('please enter number'))
                  } else {
                    this.submitForm.dishPrice1 = Number(value).toFixed(4)
                    callback()
                  }
                }
              }, trigger: 'blur'
            }
          ],
          dishPrice2: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishName2) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  if (/^(\-|\+)?\d+(\.\d+)?$/.test(value) == false) {
                    callback(new Error('please enter number'))
                  } else {
                    this.submitForm.dishPrice2 = Number(value).toFixed(4)
                    callback()
                  }
                }
              }, trigger: 'blur'
            }
          ],
          dishPrice3: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishName3) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  if (/^(\-|\+)?\d+(\.\d+)?$/.test(value) == false) {
                    callback(new Error('please enter number'))
                  } else {
                    this.submitForm.dishPrice3 = Number(value).toFixed(4)
                    callback()
                  }
                }
              }, trigger: 'blur'
            }
          ],
          dishPrice4: [
            {
              validator: (rule, value, callback) => {
                if (!value){
                  if (this.submitForm.dishName4) {
                    callback(new Error('please enter'))
                  } else {
                    callback()
                  }
                } else {
                  if (/^(\-|\+)?\d+(\.\d+)?$/.test(value) == false) {
                    callback(new Error('please enter number'))
                  } else {
                    this.submitForm.dishPrice4 = Number(value).toFixed(4)
                    callback()
                  }
                }
              }, trigger: 'blur'
            }
          ],

        }
      }
    },
    computed: {
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        } else {
          return regions
        }
      },
      status() {
        if (this.$store.state.localLang == 'MM') {
          return mm_status
        } else {
          return status
        }
      },
      cuisine() {
        if (this.$store.state.localLang == 'MM') {
          return mm_cuisine
        } else {
          return cuisine
        }
      },
      cuisineMyanmar() {
        if (this.$store.state.localLang == 'MM') {
          return mm_cuisineMyanmar
        } else {
          return cuisineMyanmar
        }
      },
      atmosphere() {
        if (this.$store.state.localLang == 'MM') {
          return mm_atmosphere
        } else {
          return atmosphere
        }
      },
      service() {
        if (this.$store.state.localLang == 'MM') {
          return mm_service
        } else {
          return service
        }
      },
      payment() {
        if (this.$store.state.localLang == 'MM') {
          return mm_payment
        } else {
          return payment
        }
      },
    },
    methods: {
      // message alert 用于前端错误提示信息
      messageToastErr (msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      expTimeFrom () {
        // if (this.addDiscountForm.timeHourFrom == '12' && this.addDiscountForm.timeMinuteFrom == '30') {
        //   this.addDiscountForm.timeFlagFrom = 0
        //   this.isDisabled1 = true
        // } else {
        //   this.isDisabled1 = false
        // }
      },
      expTimeTo () {
        // if (this.addDiscountForm.timeHourTo == '12' && this.addDiscountForm.timeMinuteTo == '30') {
        //   this.addDiscountForm.timeFlagTo = 0
        //   this.isDisabled2 = true
        // } else {
        //   this.isDisabled2 = false
        // }
      },
      addDiscount () {
        this.$refs['addDiscountForm'].validate((valid) => {
          if (valid) {
            if (this.addDiscountForm.timeFlagFrom == 0) {
              // time from : AM
              var timeFrom = this.addDiscountForm.timeHourFrom + ':' + this.addDiscountForm.timeMinuteFrom + ':' + '00'
            } else {
              // time from : PM
              let timeHourFrom = Number(this.addDiscountForm.timeHourFrom) + 12
              var timeFrom = timeHourFrom + ':' + this.addDiscountForm.timeMinuteFrom + ':' + '00'
            }
            if (this.addDiscountForm.timeFlagTo == 0) {
              // time to : AM
              var timeTo = this.addDiscountForm.timeHourTo + ':' + this.addDiscountForm.timeMinuteTo + ':' + '00'
            } else {
              // time to : PM
              let timeHourTo = Number(this.addDiscountForm.timeHourTo) + 12
              var timeTo = timeHourTo + ':' + this.addDiscountForm.timeMinuteTo + ':' + '00'
            }
            let tableInfo = {
              // 列表图片预览，最后表单提交时清空
              discount: this.addDiscountForm.discount,
              timeHourFrom: this.addDiscountForm.timeHourFrom,
              timeMinuteFrom: this.addDiscountForm.timeMinuteFrom,
              timeFlagFrom: this.addDiscountForm.timeFlagFrom,
              timeHourTo: this.addDiscountForm.timeHourTo,
              timeMinuteTo: this.addDiscountForm.timeMinuteTo,
              timeFlagTo: this.addDiscountForm.timeFlagTo,
              timeFrom: timeFrom,
              timeTo: timeTo,
            }
            this.discountData.push(tableInfo)
            console.log(this.discountData)
          } else {
            this.messageToastErr('error submit!!')
            return false
          }
        })
      },
      Delete (i) {
        this.discountData.splice(i, 1)
      },
      // 初始化 Dev 表单
      initForm () {
        this.loading = true
        initRestaurant(this.id).then((res) => {
          if (res.data) {
            let obj = res.data.info
            // console.log(obj)
            // New Development字段初始化
            this.submitForm.status = obj.status
            this.submitForm.regionId = obj.regionId
            this.getTownships(obj.regionId)
            this.submitForm.townshipId = obj.townshipId
            this.submitForm.name = obj.name
            this.submitForm.street = obj.street
            this.submitForm.phone = obj.phone
            this.submitForm.latitude = obj.latitude
            this.submitForm.longitude = obj.longitude
            this.submitForm.openingHours = obj.openingHours
            this.submitForm.cuisineIds = obj.cuisineIds
            this.submitForm.cuisineMyanmarIds = obj.cuisineMyanmarIds
            this.submitForm.atmosphereIds = obj.atmosphereIds
            this.submitForm.serviceIds = obj.serviceIds
            this.submitForm.paymentIds = obj.paymentIds
            this.submitForm.specialConditions = obj.specialConditions
            this.submitForm.merchantDescription = obj.merchantDescription
            this.submitForm.sittingCapacity = obj.sittingCapacity
            this.submitForm.averagePriceKyat = obj.averagePriceKyat
            if (obj.recommendedDishes.length>0){
              for (var i=0; i<obj.recommendedDishes.length; i++) {
                  if (i == 0) {
                    this.submitForm.dishName0 = obj.recommendedDishes[i].name
                    this.submitForm.dishPrice0 = obj.recommendedDishes[i].price
                  } else if(i == 1) {
                    this.submitForm.dishName1 = obj.recommendedDishes[i].name
                    this.submitForm.dishPrice1 = obj.recommendedDishes[i].price
                  } else if(i == 2) {
                    this.submitForm.dishName2 = obj.recommendedDishes[i].name
                    this.submitForm.dishPrice2 = obj.recommendedDishes[i].price
                  } else if(i == 3) {
                    this.submitForm.dishName3 = obj.recommendedDishes[i].name
                    this.submitForm.dishPrice3 = obj.recommendedDishes[i].price
                  } else if(i == 4) {
                    this.submitForm.dishName4 = obj.recommendedDishes[i].name
                    this.submitForm.dishPrice4 = obj.recommendedDishes[i].price
                  }
              }
            }
            let obj_d = res.data.discounts
            for (let i = 0; i < obj_d.length; i++) {
              // 返回的数据由时间戳改为字符串--注释掉
              // let time_from = new Date(obj_d[i].timeFrom)
              // let timeHourFrom = time_from.getHours()
              // let timeMinuteFrom = time_from.getMinutes()
              // let timeFlagFrom = 0
              // if (timeHourFrom < 10) {
              //   timeHourFrom = '0' + timeHourFrom
              // }
              // if (timeMinuteFrom < 10) {
              //   timeMinuteFrom = '0' + timeMinuteFrom
              // }
              // let timeFrom = timeHourFrom + ':' + timeMinuteFrom + ':' + '00'
              // if (timeHourFrom > 12) {
              //   timeHourFrom = timeHourFrom - 12
              //   if (timeHourFrom < 10) {
              //     timeHourFrom = '0' + timeHourFrom
              //   }
              //   timeFlagFrom = 1
              // }
              // let time_to = new Date(obj_d[i].timeTo)
              // let timeHourTo = time_to.getHours()
              // let timeMinuteTo = time_to.getMinutes()
              // let timeFlagTo = 0
              // if (timeHourTo < 10) {
              //   timeHourTo = '0' + timeHourTo
              // }
              // if (timeMinuteTo < 10) {
              //   timeMinuteTo = '0' + timeMinuteTo
              // }
              // let timeTo = timeHourTo + ':' + timeMinuteTo + ':' + '00'
              // if (timeHourTo > 12) {
              //   timeHourTo = timeHourTo - 12
              //   if (timeHourTo < 10) {
              //     timeHourTo = '0' + timeHourTo
              //   }
              //   timeFlagTo = 1
              // }
              let timeHourFrom = obj_d[i].timeFrom.substring(0,2)
              let timeMinuteFrom = obj_d[i].timeFrom.substring(3,5)
              let timeFlagFrom = 0
              if (Number(timeHourFrom)>=12) {
                if (Number(timeHourFrom)>12) {
                  timeHourFrom = timeHourFrom - 12
                  if (timeHourFrom < 10) {
                    timeHourFrom = '0' + timeHourFrom
                  }
                }
                timeFlagFrom = 1
              }
              let timeHourTo = obj_d[i].timeTo.substring(0,2)
              let timeMinuteTo = obj_d[i].timeTo.substring(3,5)
              let timeFlagTo = 0
              if (Number(timeHourTo)>=12) {
                if (Number(timeHourTo)>12) {
                  timeHourTo = timeHourTo - 12
                  if (timeHourTo < 10) {
                    timeHourTo = '0' + timeHourTo
                  }
                }
                timeFlagTo = 1
              }
              let timeFrom = obj_d[i].timeFrom
              let timeTo = obj_d[i].timeTo

              // console.log(timeHourFrom, 'timeHourFrom')
              // console.log(timeMinuteFrom, 'timeMinuteFrom')
              // console.log(timeFlagFrom, 'timeFlagFrom')
              // console.log(timeHourTo, 'timeHourTo')
              // console.log(timeMinuteTo, 'timeMinuteTo')
              // console.log(timeFlagTo, 'timeFlagTo')
              // console.log(timeFrom, 'timeFrom')
              // console.log(timeTo, 'timeTo')

              let tableInfo = {
                // 列表图片预览，最后表单提交时清空
                discount: obj_d[i].discount,
                timeHourFrom: timeHourFrom,
                timeMinuteFrom: timeMinuteFrom,
                timeFlagFrom: timeFlagFrom,
                timeHourTo: timeHourTo,
                timeMinuteTo: timeMinuteTo,
                timeFlagTo: timeFlagTo,
                timeFrom: timeFrom,
                timeTo: timeTo,
              }

              this.discountData.push(tableInfo)
            }
            this.submitForm.notes = obj.notes
            // Photos 初始化
            if (obj.coverPhoto){
              this.$refs.uploadCoverImages.uploadPhotoList = [{
                url: obj.coverPhoto,
                id: 0
              }]
            }
            if (obj.dishPhotos.length > 0){
              this.$refs.uploadDishImages.uploadPhotoList = obj.dishPhotos
            }
            if (obj.ambiencePhotos.length > 0){
              this.$refs.uploadAmbienceImages.uploadPhotoList = obj.ambiencePhotos
            }
            if (obj.menuPhotos.length > 0){
              this.$refs.uploadMenuImages.uploadPhotoList = obj.menuPhotos
            }
            this.loading = false
          }
        }).catch((error) => {
          if (error.response) {
            // 请求已经发出，但是服务器响应返回的状态吗不在2xx的范围内
            console.log(error.response.data)
            console.log(error.response.status)
            console.log(error.response.header)
          } else {
            // 一些错误是在设置请求的时候触发
            console.log('Error', error.message)
          }
          console.log(error.config)
          this.loading = false
          this.messageToastErr('error,please refresh the page later')
        })
      },
      getTownships(regionId) {
        let town = []
        this.townships = []
        this.submitForm.townshipId = null

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }
        this.townships = town
      },
      removeAgentForm (submitForm) {
        this.$refs[submitForm].resetFields()
        this.$refs.uploadCoverImages.removeAllImage()
        this.$refs.uploadDishImages.removeAllImage()
        this.$refs.uploadAmbienceImages.removeAllImage()
        this.$refs.uploadMenuImages.removeAllImage()
      },
      cancelPutForm () {
        // if (this.id) {
        //   this.initForm()
        // } else {
        //   this.removeAgentForm ('submitForm')
        // }
        this.$router.go(-1)
      },
      // 表单信息上传
      uploadSubmitForm (submitForm) {
        this.$refs[submitForm].validate((valid) => {
          if (valid){
            console.log(valid)
            // 折扣信息列表处理
            let discounts = []
            if (this.discountData.length > 0) {
              for (var i = 0; i < this.discountData.length; i++) {
                let d = {
                  discount: this.discountData[i].discount,
                  timeFrom: this.discountData[i].timeFrom,
                  timeTo: this.discountData[i].timeTo,
                }
                discounts.push(d)
              }
            }
            // 有id -- 则提交编辑信息
            if (this.id) {
              let dishPhotoIds = this.$refs.uploadDishImages.delList
              let ambiencePhotoIds = this.$refs.uploadAmbienceImages.delList
              let menuPhotoIds = this.$refs.uploadMenuImages.delList
              let deletePhotoIds = []
              deletePhotoIds = dishPhotoIds.concat(ambiencePhotoIds).concat(menuPhotoIds)
              let formAjaxData = {
                /* 编辑时添加的字段 start */
                id: this.id,
                deletePhotoIds: deletePhotoIds,
                /* 编辑时添加的字段 end */
                status: this.submitForm.status,
                regionId: this.submitForm.regionId,
                townshipId: this.submitForm.townshipId,
                name: this.submitForm.name,
                street: this.submitForm.street,
                phone: this.submitForm.phone,
                latitude: this.submitForm.latitude,
                longitude: this.submitForm.longitude,
                openingHours: this.submitForm.openingHours,
                cuisineIds: this.submitForm.cuisineIds,
                cuisineMyanmarIds: this.submitForm.cuisineMyanmarIds,
                atmosphereIds: this.submitForm.atmosphereIds,
                serviceIds: this.submitForm.serviceIds,
                paymentIds: this.submitForm.paymentIds,
                specialConditions: this.submitForm.specialConditions,
                merchantDescription: this.submitForm.merchantDescription,
                sittingCapacity: this.submitForm.sittingCapacity,
                averagePriceKyat: this.submitForm.averagePriceKyat,
                dishName0: this.submitForm.dishName0,
                dishName1: this.submitForm.dishName1,
                dishName2: this.submitForm.dishName2,
                dishName3: this.submitForm.dishName3,
                dishName4: this.submitForm.dishName4,
                dishPrice0: this.submitForm.dishPrice0,
                dishPrice1: this.submitForm.dishPrice1,
                dishPrice2: this.submitForm.dishPrice2,
                dishPrice3: this.submitForm.dishPrice3,
                dishPrice4: this.submitForm.dishPrice4,
                discounts: JSON.stringify(discounts),
                notes: this.submitForm.notes,
              }
              let params = Qs.stringify(formAjaxData)
              console.log(params, 'params')
              let config = {
                'Content-Type': 'multipart/form-data'
              }
              this.fullscreenLoading = true
              uploadFormInfo(params, config)
                .then((res) => {
                  if (res) {
                    if (res.data) {
                      console.log(res)
                      let rid = res.data.object.id
                      console.log(rid)
                      this.sendCoverPhoto(rid)
                    }
                  }
                })
                .catch((error) => {
                  console.log(error)
                  this.fullscreenLoading = false
                  this.messageToastErr('error,please try again leter')
                })
            } else {
              //新增 -- 表单信息
              let formAjaxData = {
                status: this.submitForm.status,
                regionId: this.submitForm.regionId,
                townshipId: this.submitForm.townshipId,
                name: this.submitForm.name,
                street: this.submitForm.street,
                phone: this.submitForm.phone,
                latitude: this.submitForm.latitude,
                longitude: this.submitForm.longitude,
                openingHours: this.submitForm.openingHours,
                cuisineIds: this.submitForm.cuisineIds,
                cuisineMyanmarIds: this.submitForm.cuisineMyanmarIds,
                atmosphereIds: this.submitForm.atmosphereIds,
                serviceIds: this.submitForm.serviceIds,
                paymentIds: this.submitForm.paymentIds,
                specialConditions: this.submitForm.specialConditions,
                merchantDescription: this.submitForm.merchantDescription,
                sittingCapacity: this.submitForm.sittingCapacity,
                averagePriceKyat: this.submitForm.averagePriceKyat,
                dishName0: this.submitForm.dishName0,
                dishName1: this.submitForm.dishName1,
                dishName2: this.submitForm.dishName2,
                dishName3: this.submitForm.dishName3,
                dishName4: this.submitForm.dishName4,
                dishPrice0: this.submitForm.dishPrice0,
                dishPrice1: this.submitForm.dishPrice1,
                dishPrice2: this.submitForm.dishPrice2,
                dishPrice3: this.submitForm.dishPrice3,
                dishPrice4: this.submitForm.dishPrice4,
                discounts: JSON.stringify(discounts),
                notes: this.submitForm.notes,
              }
              let params = Qs.stringify(formAjaxData)
              let config = {
                'Content-Type': 'multipart/form-data'
              }
              this.fullscreenLoading = true
              uploadFormInfo(params, config)
                .then((res) => {
                  if (res) {
                    if (res.data) {
                      console.log(res)
                      let rid = res.data.object.id
                      console.log(rid)
                      this.sendCoverPhoto(rid)
                    }
                  }
                })
                .catch((error) => {
                  console.log(error)
                  this.fullscreenLoading = false
                  this.messageToastErr('error,please try again leter')
                })
            }
          } else {
            this.messageToastErr('error submit!!')
            return false
          }
        })
      },
      //Cover Photo 上传
      sendCoverPhoto(id) {
        let coverPhotoId = this.$refs.uploadCoverImages.delList
        if (coverPhotoId && coverPhotoId.length>0) {
          this.sendFormPhotos(1,id)
          return false
        }
        let uploadPhotos = []
        uploadPhotos = this.$refs.uploadCoverImages.uploadPhotoList
        let formData = new FormData()
        //  是否有图片提交，有则提交图片，没有则显示表单提交成功信息
        let isToUpload = false
        for (let i=0; i<uploadPhotos.length; i++){
          if (uploadPhotos[i].photoBlob){
            formData.append('file', uploadPhotos[i].photoBlob)
            isToUpload = true
          }
        }
        if (isToUpload) {
          formData.append('restaurantId', id)
          let config = {
            'Content-Type': 'multipart/form-data'
          }
          uploadRestaurantCoverLogo(formData, config).then((res) => {
            if (res) {
              if (res.data) {
                if (res.data.errorID === 0) {
                  this.sendFormPhotos(1,id)
                  console.log('upload Cover Success')
                } else {
                  this.fullscreenLoading = false
                  this.messageToastErr('Upload picture failed, please try again leter')
                }
              }
            }
          })
            .catch((error) => {
              this.fullscreenLoading = false
              console.log(error)
              this.messageToastErr('error, please try again leter')
            })
        } else {
          this.sendFormPhotos(1,id)
          console.log('upload Cover Success')
        }
      },
      //多图上传 type == 1:Dish; 2:Ambience; 3:Menu
      sendFormPhotos (type, id){
        let uploadPhotos = []
        let fileName = ''
        if (type == 1) {
          uploadPhotos = this.$refs.uploadDishImages.uploadPhotoList
          fileName = 'Dish'
        } else if (type == 2) {
          uploadPhotos = this.$refs.uploadAmbienceImages.uploadPhotoList
          fileName = 'Ambience'
        } else if (type == 3) {
          uploadPhotos = this.$refs.uploadMenuImages.uploadPhotoList
          fileName = 'Menu'
        }
        let formData = new FormData()
        //  是否有图片提交，有则提交图片，没有则显示表单提交成功信息
        let isToUpload = false
        for (let i=0; i<uploadPhotos.length; i++){
          if (uploadPhotos[i].photoBlob){
            // formData.append('file_' + fileName + '_' + i, uploadPhotos[i].photoBlob)
            formData.append('file', uploadPhotos[i].photoBlob)
            isToUpload = true
          }
        }
        if (isToUpload) {
          formData.append('restaurantId', id)
          formData.append('type', type)
          let config = {
            'Content-Type': 'multipart/form-data'
          }
          uploadRestaurantPhotos(formData, config).then((res) => {
            if (res) {
              if (res.data) {
                if (res.data.errorID === 0) {
                  if (type == 1) {
                    this.sendFormPhotos(2,id)
                    console.log('upload Dish Success')
                  } else if (type == 2){
                    console.log('upload Ambience Success')
                    this.sendFormPhotos(3,id)
                  } else {
                    this.fullscreenLoading = false
                    console.log('upload Menu Success')
                    // this.reLoadPage()
                    this.$router.push('/restaurants')
                  }
                } else {
                  this.fullscreenLoading = false
                  this.messageToastErr('Upload picture failed, please try again leter')
                }
              }
            }
          })
            .catch((error) => {
              this.fullscreenLoading = false
              console.log(error)
              this.messageToastErr('error, please try again leter')
            })
        } else {
          if (type == 1) {
            this.sendFormPhotos(2,id)
          } else if (type == 2){
            this.sendFormPhotos(3,id)
          } else {
            this.fullscreenLoading = false
            console.log('upload Menu Success')
            // this.reLoadPage()
            this.$router.push('/restaurants')
          }
        }
      },
      reLoadPage () {
        this.fullscreenLoading = true
        if (this.id) {
          this.initForm()
          this.fullscreenLoading = false
        } else {
          this.removeAgentForm('submitForm')
          this.fullscreenLoading = false
        }
        console.log('reload')
      }
    },
    components: {
      uploadCoverImages,
      uploadDishImages,
      uploadAmbienceImages,
      uploadMenuImages,
    },
    mounted () {
      this.id = this.$route.query.id || ''
      console.log(Number('00'))
      if (this.id) {
        this.initForm()
      }
    }
  }
  </script>
<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .food-content-box .container-padding {
    padding: 20px 40px 0 40px;
  }
  .label-title {
    display: block;
    line-height:28px;
    padding:0 0 10px 0;
    font-size: 14px;
    color: #606266;
  }
  .label-vertical .el-form-item__label{
    width: 100%;
  }
  .features-check .el-checkbox{
    width:20%;
  }
  .features-check .el-checkbox+.el-checkbox{
    margin-left: 0;
  }
  .features-check.el-form-item{
    display: block!important;
  }
  .bottom-line{
    border-bottom: 1px solid #e6e6e6;
  }
  .margin-line{
    margin:10px 0;
  }
  .list-info{
    text-align: center;
    display: block;
  }
</style>
